iT邦幫忙

DAY 20
2

新手前端日記系列 第 20

[新手前端]純CSS喬巴又來了,css3- boxshadow

  • 分享至 

  • xImage
  •  

有病的人才會去做的東西,我有病
http://chibc.net/demo/purecss/

點連結後可以看到,有個喬巴的圖示出現在畫面上,看原始碼,會發現只有套一個樣式而且不是背景圖。

這個,就是CSS3 裡的box-boxshadow 新功能,其實就是盒模型的陰影,也就是幫元素加上陰影,有了這個樣式之後,就不需要每次要調一點小東西就要開 photoshop了。

除了陰影的方向、內外、距離、顏色、大小之外還可以設定透明度,幾乎就等於 photoshop圖層特效裡的陰影,而且是內陰影和外陰影都有,更誇張的是可以同時設定好幾個陰影只要加上 , 分隔就行了。

語法大約長這樣
box-shadow:inset 1px 2px 3px black;
元素陰影: 內陰影 往右1px 往下2px 模糊3px 黑色;

照這個順序來輸入數值,其中 內外陰影預設是外,沒寫就會自動是外陰影。
模糊預設是0也就是沒有,顏色也是預設黑色,可以用rgb表示 來變更透明度。
可接受負數,如-2px 就是會往右或上方移動的意思,長度單位也是px em 等都接受。

因為是CSS3 所以記得加上 prefix -webkit- , -mos-
然後萬惡的IE就.... 你知道。

詳細的參數可以參考這裡
https://developer.mozilla.org/en-US/docs/CSS/box-shadow

至於我這次畫的喬巴,就是利用可重覆增加陰影的特性,一直一直的增加不同的點....
結果就會變成這個樣子啦~~ 點出來的其實...
也沒什麼實質意義,就有病而已...

==
chibc's blog |純CSS喬巴又來了,css3- boxshadow


上一篇
[翻譯]Border-radius:用CSS畫圓角
下一篇
[新手前端]視覺及企劃也該知道的網頁設計概念
系列文
新手前端日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-28 23:13:54

chibc提到:
http://chibc.net/demo/purecss/

點進去看,並順便看了樓主其它作品,還真是有梗又給力,讚啦!!

chibc iT邦新手 3 級 ‧ 2012-10-28 23:40:20 檢舉

這張似乎是我被轉最多的圖吧...汗 XD

我還有一張上新聞的一一+
不過網路上分享被記者抄不是一兩天的事,而且被抄過的人也是多到不行啦 囧

我要留言

立即登入留言